<template>
  <div class="sidebar">
    <el-menu router>
      <template v-for="item in items" v-if="checkRole(item.role,role)">
        <template v-if="item.subs">
          <el-submenu :index="item.index" :key="item.index">
            <template slot="title">
              <i :class="item.icon"></i>{{ item.title }}
            </template>
            <el-menu-item v-for="(subItem, i) in item.subs" :key="i" :index="subItem.index">
              {{ subItem.title }}
            </el-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item v-bind:index="item.index" :key="item.index">
            <i :class="item.icon"></i>{{ item.title }}
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Sidebar',
  data () {
    return {
      role: '',
      items: [
        {
          icon: 'el-icon-dish',
          index: 'customerDish',
          title: '点餐',
          role: 'user'
        },
        {
          icon: 'el-icon-s-order',
          index: 'customerOrder',
          title: '查看订单',
          role: 'user'
        },
        {
          icon: 'el-icon-dish',
          index: 'adminDish',
          title: '菜品管理',
          role: 'admin'
        },
        {
          icon: 'el-icon-s-order',
          index: 'adminOrder',
          title: '订单管理',
          role: 'admin'
        },
        {
          icon: 'el-icon-setting',
          index: 'userCenter',
          title: '个人中心设置',
          role: 'all',
          subs: [
            {
              index: 'modifyPassword',
              title: '修改密码'
            },
            {
              index: 'uploadAvatar',
              title: '上传头像'
            },
            {
              index: 'modifyUserName',
              title: '修改用户名'
            }
          ]
        }
      ]
    }
  },
  mounted () {
    console.log(sessionStorage)
    let isAdmin = sessionStorage.getItem('is_admin')
    if (isAdmin === '0') {
      this.role = 'user'
    } else if (isAdmin === '1'){
      this.role = 'admin'
    }
  },
  methods: {
    checkRole (role1, role2) {
      if (role1 === 'all') {
        return true
      } else {
        return role1 === role2;
      }
    }
  }
}
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  width: 250px;
  left: 0;
  top: 120px;
  bottom: 0;
  /*background: #2E363F;*/
  background-color: white;
}
</style>
